<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ng-init</title>
    <script type="text/javascript" src="./angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <p>姓：<input type="text" ng-model="firstName"></p>
        <p>名：<input type="text" ng-model="lastName"></p>
        {{firstName+lastName}}
        <!-- 此处不会打印，因为对象空间独立，
                person并没有挂载到firstController中 -->
        {{person[0]['name']+' '+person[0]['age']+' '+height}}

        <div ng-controller="secondController">
            <p>姓名：<input type="text" value={{person[0]['name']}}></p>
            <p>年龄：<input type="text" value={{person[0]['age']}}></p>
            <!-- 放在外层时，由于作用域的原因，不会展示该内容，
                        但是放在这里，即内层，会打印，因为继承了firstController-->
            {{firstName+lastName}}
            <!-- 使用循环 -->
            <ul><li ng-repeat="p in person">姓名：{{p.name}}，年龄：{{p.age}}，身高：{{height}}</li></ul>
        </div>
    </div>
</div>
<script>
    var app=angular.module("myApp", []);
    app.controller('firstController', function ($scope, $rootScope) {
        $scope.firstName = '水兵';
        $scope.lastName = '1号';
        $rootScope.height = '180cm';
    });
    app.controller('secondController', function ($scope) {
        $scope.person=[
            {name:"张三", age:25},
            {name:"王五", age:35},
            {name:"李四", age:28}
        ]
    });
</script>
</body>
</html>